<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>个人管理</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../js/layer/layui-v2.3.0/layui/css/layui.css">
  <link rel="stylesheet" href="../css/common/header.css">
  <link rel="stylesheet" href="../css/common/action2.css">
  <link rel="stylesheet" href="../css/pages/pam.css">
</head>
<body>
  <!-- 头部 -->
  <div class="header-wrapper">
    <div class="header-navs">
      <div class="nav-content">
        <span>欢迎您，admin</span>
        <span>账号管理</span>
        <span>注销</span>
      </div>
    </div>
  </div>

  <!-- 容器 -->
  <div class="wrapper">
    <!-- 搜索框 -->
    <div class="search">
      <input class="search-input" type="text" />
      <div class="search-btn">搜索</div>
    </div>
    <!-- 选择框 -->
    <div class="select-group">
      <form class="layui-form" action="">
        <div class="app-form-item">
          <div class="layui-form-item">
            <label class="layui-form-label">资产分类</label>
            <div class="layui-input-block">
              <select lay-verify="required">
                <option value=""></option>
                <option value="0">全部</option>
                <option value="1">类型1</option>
                <option value="2">类型2</option>
                <option value="3">类型3</option>
                <option value="4">类型4</option>
              </select>
            </div>
          </div>
        </div>

          <div class="app-form-item">
              <div class="layui-form-item">
                <label class="layui-form-label">存放地点</label>
                <div class="layui-input-block">
                  <select lay-verify="required">
                    <option value=""></option>
                    <option value="0">全部</option>
                    <option value="1">地点1</option>
                    <option value="2">地点2</option>
                    <option value="3">地点3</option>
                    <option value="4">地点4</option>
                  </select>
                </div>
              </div>
          </div>

          <div class="app-form-item">
              <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                  <select lay-verify="required">
                    <option value=""></option>
                    <option value="0">全部</option>
                    <option value="1">状态1</option>
                    <option value="2">状态2</option>
                    <option value="3">状态3</option>
                    <option value="4">状态4</option>
                  </select>
                </div>
              </div>
          </div>
      </form>
    </div>

    <!-- 日期选择 -->
    <div class="date-group">
      <div class="app-form-item">
        <div class="layui-form-item">
          <label class="layui-form-label">购入时间</label>
          <div class="layui-input-block">
            <input type="text" id="startInput" required  lay-verify="required" placeholder="开始时间" autocomplete="off" class="layui-input">
          </div>
        </div>
        <i class="layui-icon layui-icon-log app-date-icon"></i>  
      </div>
      <div class="app-form-item">
        <div class="app-date-hr"></div>
        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="layui-input-block">
            <input type="text" id="endInput" required  lay-verify="required" placeholder="开始时间" autocomplete="off" class="layui-input">
          </div>
        </div>
        <i class="layui-icon layui-icon-log app-date-icon"></i>  
      </div>
    </div>
    <!-- 操作导航 -->
    <div class="action">
      <div class="details-list-wrap">
        <ul class="details-list">
          <!-- <li id="action0">
            <div class="item-wrap">
              <img src="../imgs2/assetDetails_icon1.png">
              <span>发放</span>
            </div>
          </li> -->
          <li id="action1">
            <div class="item-wrap">
              <img src="../imgs2/assetDetails_icon2.png">
              <span>变更</span>
            </div>
          </li>
          <li id="action2">
            <div class="item-wrap">
              <img src="../imgs2/assetDetails_icon3.png">
              <span>回收</span>
            </div>
          </li>
          <li id="action3">
            <div class="item-wrap">
              <img src="../imgs2/assetDetails_icon4.png">
              <span>调剂</span>
            </div>
          </li>
          <li id="action4">
            <div class="item-wrap">
              <img src="../imgs2/assetDetails_icon5.png">
              <span>维修</span>
            </div>
          </li>
          <li id="action5">
            <div class="item-wrap">
              <img src="../imgs2/assetDetails_icon6.png">
              <span>报废</span>
            </div>
          </li>
          <!-- <li>
            <div class="item-wrap">
              <img src="../imgs2/assetDetails_icon7.png">
              <span>资产日志</span>
            </div>
          </li> -->
        </ul>
      </div>
    </div>
    <!-- 表格容器 -->
    <div id="app" class="table-wrapper">
      <table class="layui-table" lay-even lay-skin="nob">
        <thead>
          <tr>
            <th style="width:40px;"><input type="checkbox"></th>
            <th>资产编码</th>
            <th>资产名称</th>
            <th>资产类型</th>
            <th>存放地点</th>
            <th>使用人</th>
            <th>领用时间</th>
            <th>管理人员</th>
            <!-- 新增select -->
            <th style="width:96px!important">
              <div>
                <form class="layui-form" action="">
                  <div class="layui-input-block">
                    <select name="status" lay-verify="required">
                      <option value="">状态</option>
                      <option value="0">未使用</option>
                      <option value="1">使用中</option>
                      <option value="2">维修中</option>
                      <option value="3">放置中</option>
                      <option value="4">已报废</option>
                    </select>
                  </div>
                </form>
              </div>
            </th>
            <th>操作</th>
          </tr> 
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableData" :key="item[0]">
            <td>
              <input type="checkbox">
            </td>
            <td>{{item[0]}}</td>
            <td>{{item[1]}}</td>
            <td>{{item[2]}}</td>
            <td>{{item[5]}}</td>
            <td>{{item[7]}}</td>
            <td>{{item[8]}}</td>
            <td>{{item[6]}}</td>
            <td>
                <button v-if="item[13] == '维修中'" onclick="showFin()" class="layui-btn  layui-btn-radius layui-btn-sm" style="background: #ff0000">维修中</button>
                <span v-if="item[13] != '维修中'">{{item[13]}}</span>
              </td>
            <td>
              <button @click="showDetail(index)" class="layui-btn layui-btn-radius layui-btn-sm" style="background: #6dc464">详情</button>
              <button onclick="showLog()" class="layui-btn  layui-btn-radius layui-btn-sm" style="background: #fdb03b">日志</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script src="../js/jquery/jquery.min.js"></script>
  <script src="../js/layer/layui-v2.3.0/layui/layui.all.js"></script>
  <script src="../js/data/table.data.js"></script>
  <script src="../js/vue/vue.min.js"></script>
  <script>
    // 弹出层控件
    var layer = null;
    var layerForm = null;
    // 使用layui组件
    layui.use(['laydate', 'layer', 'form'], function(){
      var laydate = layui.laydate;
      layer = layui.layer;
      //执行一个laydate实例
      laydate.render({
        elem: '#startInput' //指定元素
      });
      laydate.render({
        elem: '#endInput' //指定元素
      });
      layerForm = layui.form;
    });

    var app = new Vue({
      el: '#app',
      data: {
        tableData: PTemTableData
      },
      methods: {
        showDetail: function (index) {
          location.href = "./pamDetail.html?navIndex=" + index;
        }
      },
      created: function () {
        this.$nextTick(function () {
          // 渲染form表单
          layerForm.render();
        })
      }
    });

    // 显示详情
    function showDetail () {
      location.href = "./pamDetail.html"
    }
    // 显示日志
    function showLog () {
      layer.open({
        type: 2,
        title: '资产日志',
        btnAlign: 'c',
        closeBtn: 2,
        area: ['63%', '66%'],
        shadeClose: true,
        content: './assetsLog.html'
      });
    }

    // 完成维修按钮点击事件
    function showFin () {
      layer.open({
        type: 2,
        title: '完成维修',
        btnAlign: 'r',
        closeBtn: 2,
        area: ['810px', '400px'],
        shadeClose: true,
        skin: 'zcffModal', 
        content: './finRepair.html',
        btn: ['取消', '确定'],
        btn1: function (index, layero) {
          layer.close(index)
        },
        btn2: function (index, layero) {
          layer.close(index)
        }
      });
    }

    // 操作点击事件
    $('.details-list li').on('click', function () {
      var id = this.id;
      switch (id) {
        case 'action0' :
          // 发放
          layer.open({
            type: 2,
            title: '发放',
            btnAlign: 'r',
            closeBtn: 2,
            area: ['820px', '640px'],
            shadeClose: true,
            skin: 'zcffModal', 
            content: './assetDistribution.html',
            btn: ['取消', '确定'],
            btn1: function (index, layero) {
              layer.close(index)
            },
            btn2: function (index, layero) {
              layer.close(index)
              // 打开资产入库页面填表
              layer.open({
                type: 2,
                title: false,
                btn: ['下一步'],
                btnAlign: 'c',
                closeBtn: 2,
                area: ['63%', '64%'],
                skin: 'zcrkModal', 
                shadeClose: true,
                content: './assetStorage.html',
                btn1: function (index, layero) {
                  layer.close(index);
                  // 打开资产分发下一步弹窗
                  layer.open({
                    type: 2,
                    title: false,
                    btn: ['取消', '确定', '预览'],
                    btnAlign: 'c',
                    closeBtn: 0,
                    area: ['63%', '64%'],
                    skin: 'zcffNextModal', 
                    shadeClose: true,
                    content: './assetDisNext.html'
                  });
                }
              });
            }
          });
          break;
        case 'action1' :
          // 变更
          location.href = "./amUpdate.html"
          break;
        case 'action2' :
          // 回收
          layer.confirm(
            '回收操作会使资产将成为无使用人状态，是否仍要进行此项操作？', 
            { 
              title: '回收',
              btn: ['取消','确定'], //按钮
              closeBtn: 2,
              skin: 'hsModal',
              area: ['500px', '200px']
            }, 
            function(index, layero){
              layer.close(index)
            }, 
            function(index, layero){
              layer.close(index)
            }
          );
          
          break;
        case 'action3' :
          layer.open({
            type: 2,
            title: '调剂',
            btnAlign: 'r',
            closeBtn: 2,
            area: ['820px', '640px'],
            shadeClose: true,
            skin: 'zcffModal', 
            content: './assetDistribution.html',
            btn: ['取消', '确定'],
            btn1: function (index, layero) {
              layer.close(index)
            },
            btn2: function (index, layero) {
              layer.close(index)
              // 打开资产入库页面填表
              layer.open({
                type: 2,
                title: false,
                btn: ['下一步'],
                btnAlign: 'c',
                closeBtn: 2,
                area: ['63%', '64%'],
                skin: 'zcrkModal', 
                shadeClose: true,
                content: './assetStorage.html',
                btn1: function (index, layero) {
                  layer.close(index);
                  // 打开资产分发下一步弹窗
                  layer.open({
                    type: 2,
                    title: false,
                    btn: ['取消', '确定', '预览'],
                    btnAlign: 'c',
                    closeBtn: 0,
                    area: ['63%', '64%'],
                    skin: 'zcffNextModal', 
                    shadeClose: true,
                    content: './assetDisNext.html'
                  });
                }
              });
            }
          });
          break;
        case 'action4' :
          // 维修
          layer.open({
            type: 2,
            title: '维修',
            btnAlign: 'r',
            closeBtn: 2,
            area: ['810px', '400px'],
            shadeClose: true,
            skin: 'zcffModal', 
            content: './repair.html',
            btn: ['取消', '确定'],
            btn1: function (index, layero) {
              layer.close(index)
            },
            btn2: function (index, layero) {
              layer.close(index)
            }
          });
          break;
        case 'action5' :
          // 报废
          layer.confirm(
            '报废操作后，资产将成为不可操作状态，是否仍要进行此项操作？', 
            { 
              title: '报废',
              btn: ['取消','确定'], //按钮
              closeBtn: 2,
              skin: 'hsModal',
              area: ['500px', '200px']
            }, 
            function(index, layero){
              layer.close(index)
            }, 
            function(index, layero){
              layer.close(index)
            }
          );
          break;
        case 'action6' :
          // 资产日志
          layer.open({
            type: 2,
            title: '资产日志',
            btnAlign: 'c',
            closeBtn: 2,
            area: ['63%', '66%'],
            shadeClose: true,
            content: './assetsLog.html'
          });
          break;
      }
    })
  </script>
</body>
</html>